<script setup>
import { ref, inject, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import chargeApi from '@/apis/charge'
import { useAuthStore } from '@/stores/auth'

import IconWechatPay from '@/components/icons/IconWechatPay.vue'

const route = useRoute()
const activeName = ref(route.query.type || 'vip')
const user = inject('user')

const handleClick = (tab, event) => {
  console.log(tab, event)
}

//判断窗口是否小于640yu
const isSmallPage = inject('isSmallPage', false)

const orderDialogVisible = ref(false)

const types = ['vip', 'score']

const features = {
  vip: ['VIP会员可无限对话', 'VIP会员可无限对话', 'VIP会员可无限对话', 'VIP会员可无限对话'],
  score: [
    '积分永不过期',
    'AI对话(高级)5积分/次',
    'AI对话(进阶)20积分/次',
    'AI绘画20积分/次',
    'AI视频50积分/次',
  ],
}

const prices = ref({})
const loadPrices = async (type) => {
  const { data } = await chargeApi.prices(type)
  prices.value[type] = data
  console.log(prices.value[type])
}

watch(activeName, (val) => {
  loadPrices(val)
})

onMounted(() => {
  loadPrices(activeName.value)
})
</script>

<template>
  <div class="flex flex-col w-full min-h-80 lg:mt-2">
    <div class="flex items-center w-full px-3 py-4 rounded">
      <el-avatar :size="60" class="rounded-full mr-3" :src="user.avatar" />
      <div class="flex-1 ml-2 mr-12 space-y-1">
        <div class="flex items-center">
          <span class="text-xl font-bold text-[--el-text-color-primary]">
            {{ user.nickname }}
          </span>
        </div>
        <div class="text-sm space-x-1">
          <el-tag type="info" size="small" v-if="!user.vip">VIP 未开通</el-tag>
          <el-tag type="warning" size="small" v-else> VIP {{ user.vip_expire }} 到期 </el-tag>
          <el-tag type="success" size="small">{{ user.score }} 积分</el-tag>
        </div>
      </div>
    </div>

    <div class="m-3">
      <div class="flex justify-center border-b border-b-[--el-color-warning-light-8] gap-1">
        <div
          :class="{ 'tab-item': true, active: activeName === 'vip' }"
          @click="activeName = 'vip'"
        >
          <FontAwesomeIcon icon="crown" class="text-yellow-500" />
          <span>会员套餐</span>
        </div>
        <div
          :class="{ 'tab-item': true, active: activeName === 'score' }"
          @click="activeName = 'score'"
        >
          <FontAwesomeIcon icon="coins" class="text-yellow-500" />
          <span>积分套餐</span>
        </div>
      </div>

      <div>
        <template v-for="typ in types" :key="typ">
          <div class="px-1 py-4 sm:px-3" v-if="activeName === typ">
            <div
              class="grid grid-cols-2 lg:grid-cols-3 gap-3 text-sm text-[--el-text-color-regular]"
            >
              <div class="space-x-0.5" v-for="item in features[typ]" :key="item">
                <FontAwesomeIcon icon="check-circle" class="text-[--el-color-success]" />
                <span>{{ item }}</span>
              </div>
            </div>
            <div
              class="flex flex-wrap gap-5 w-full text-center mt-4 justify-between sm:justify-start"
            >
              <template v-for="item in prices[typ]" :key="item.id">
                <div class="price-item" @click="orderDialogVisible = true">
                  <span class="text-[--el-text-color-warning]">
                    <FontAwesomeIcon
                      icon="crown"
                      size="xs"
                      class="text-[--el-color-warning-light-5]"
                    />
                    {{ item.label }}
                  </span>
                  <div class="text-xl text-[--el-color-warning]">￥{{ item.price }}</div>
                  <div class="text-sm text-[--el-text-color-secondary] line-through">
                    ￥{{ item.original_price }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
  <!-- 订单确认 -->
  <el-dialog v-model="orderDialogVisible" title="订单确认" :width="isSmallPage ? '90%' : 400">
    <div class="px-2 py-3">
      <div class="flex-1 flex flex-col justify-center space-y-2 text-[--el-text-color-regular]">
        <div class="flex-1 flex flex-col space-y-2">
          <div class="">
            产品名称：
            <span class="text-[--el-color-warning]">VIP会员 - 1个月</span>
          </div>
          <div class="">
            支付价格：
            <span class="text-[--el-color-danger]">¥30</span>
          </div>
          <div class="flex">
            支付方式：
            <span class="flex items-center space-x-1">
              <IconWechatPay /><span>微信支付</span>
            </span>
          </div>
        </div>
        <div>
          <el-checkbox>
            <span class="text-sm">我已阅读并同意</span>
            <a href="#" class="text-[--el-color-primary]">《用户服务协议》</a>
          </el-checkbox>
          <div class="mt-2">
            <el-button type="warning" class="w-32">
              <FontAwesomeIcon icon="qrcode" />
              <span class="pl-1">确认支付</span>
            </el-button>
            <el-button @click="orderDialogVisible = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.tab-item {
  @apply py-2 text-center rounded-t-lg space-x-1 w-[45%] cursor-pointer hover:text-[--el-color-warning] text-[--el-text-color-primary];
}

.tab-item.active {
  @apply bg-[--el-color-warning-light-8] text-[--el-color-warning];
}

.price-item {
  @apply border border-[--el-color-warning] rounded space-y-2 w-[47%] sm:w-[150px] py-4 cursor-pointer hover:bg-[--el-color-warning-light-9] hover:border-[--el-color-warning];
}

.price-item.active {
  @apply bg-[--el-color-warning-light-9] border-[--el-color-warning];
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
